<template>
<div>
  <div>
    <el-input
        size="small"
        class="title-input"
        placeholder="添加职位..."
        suffix-icon="el-icon-plus"
        v-model="pos.name"
        clearable
        @keydown.enter.native="addPosition">
    </el-input>
    <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left: 30px"
       @click="addPosition">添加</el-button>
  </div>
  <div class="posTab">
    <el-table
        border
        :data="positions"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
        >
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="100">
    </el-table-column>
      <el-table-column
          prop="name"
          label="职位"
          width="180">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间"
        width="180">
    </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger" style="margin-top: 20px;width: 250px"
               @click="deleteBatch"
               :disabled="this.tableChecked.length===0">批量删除</el-button>
  </div>
  <el-dialog
    title="编辑职位"
    :visible.sync="dialogVisible"
    width="30%">
  <div>
    <el-tag type="info">职位名称：</el-tag>
    <el-input v-model="updatePst.name" style="width: 250px;margin-left: 5px"></el-input>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="toUpdate">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
export default {
name: "PosMana",
  data(){
  return{
    pos:{
      name:''
    },
    positions:[],
    dialogVisible:false,
    updatePst:{
      name:''
    },
    ids:[],
    names:[],
    tableChecked: []
  }
  },
  methods:{
  initPositions(){//获取职位信息
    this.getRequest('/system/basic/position/list').then(resp=>{
      this.positions = resp
    })
  },
    addPosition(){ //添加职位
      if(this.pos.name){
        this.postRequest('/system/basic/position/add',this.pos).then(res=>{
          if(res){
            this.initPositions()
            this.pos.name=''
          }
        })
      }else {
        this.$message.error('请输入职位名称');
      }
    },
    handleDelete(index,row){//删除职位
      this.$confirm('是否要删除该职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        debugger
        this.deleteRequest('/system/basic/position/delete?id='+row.id).then(resp=>{
          if (resp){
            this.initPositions()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index,row){//编辑弹窗
        this.dialogVisible = true
        Object.assign(this.updatePst,row) //把数据拷贝给updatePst
    },
    toUpdate(){//修改
    this.putRequest('/system/basic/position/update',this.updatePst).then(res=>{
      if(res){
        this.initPositions()
        this.dialogVisible = false
      }
    })
    },
    handleSelectionChange(val){
    this.tableChecked= val
    },
    deleteBatch(){//删除 [{1},{2},{3}] [2]
      for (let i = 0 ;i<this.tableChecked.length;i++) {
        this.ids.push(this.tableChecked[i].id);
        this.names.push(this.tableChecked[i].name)
      }
      this.$confirm('是否要删除'+this.names+ '职位', '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/position/deletes?ids=' + this.ids).then(res=>{
          if(res){
            this.initPositions()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
  this.initPositions()
  }
}
</script>

<style scoped>
.title-input{
  width: 350px;
}
.posTab{
  margin-top: 30px;
}
</style>